<template>
  <div class="app-cont">
        <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<headers title="我要开店"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <input type="text" placeholder="请填写您的邀请码" v-model="inviteCode">
          <div class="openShop">
            <a href="javascript:;" @click="openshop">立即开店</a>
            <p><a href="javascript:;" @click="how">如何获取邀请码</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  /* eslint-disable semi */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'shopSet',
    data () {
      return {
        inviteCode: '',
        showAlert:false,
        alertText:null
      }
    },
    created () { // 生命周期
      wxHttpTool.wxAuthor(this,function(varRet,varJson,varThis=this){
        if(varRet == -1){
           this.alertTip('网络错误');
                this.go = function(){
                   this.showAlert = false;
                }
            return;
        }
        varThis.inviteCode = http_getParam('inviteCode');
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })
      })
    },
    methods: {// 方法
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
        },
      openshop () {
//        console.log(1111)
        const jsonValue = JSON.stringify({
          'c': '10016',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
            'tokenId': token(),
            'qrCode': this.inviteCode  // 邀请码
//            'qrCode': 'tPgWMC5AVW'
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res);
          const data = res.data.p;
          if (data.isTrue === true) {
            // 更新用户类型
            let varUserInfo = JSON.parse(window.localStorage.data);
            varUserInfo.type = 1;
            window.localStorage.data = JSON.stringify(varUserInfo);
            // alert('恭喜你，当老板啦');
            this.$router.push({name: 'NewShop'});
          } else {
            this.showAlert = true;

            this.alertTip(data.errorMsg);
//            alert(data.errorMsg);
            if (data.errorCode === 90) {
              this.go = ()=> {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }
          }
        }, (res) => {
          this.alertTip( "网络错误");
          this.go = function(){
             this.showAlert = false;
          }
//          alert('网络错误');
        })
      },
      how () {
        this.alertTip("别问我，我也不知道");
        this.go = function(){
           this.showAlert = false;
        }
        // alert('别问我，我也不知道')
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  a:hover, a:visited, a:link, a:active {
    color: #fff;
  }
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
    background-color: #fe3e21;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      /*flex: 1;*/
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: url("../assets/images/openshop/bigBg.png") no-repeat;
        background-size: 100%;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .tabbar {
    position: fixed;
    /*flex: 1;*/
    box-sizing: border-box;
    height: 94px;
    border-top: 1px solid #f3f3f3;
    color: #898d93;
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /*background-color: #f4f4f4;*/
    background: url("../assets/images/openshop/bg@1x.png") no-repeat;
    background-size: 100%;
    display: flex;
    box-sizing: border-box;
    padding-top:620px;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
    >input{
      width: 484px;
      height: 85px;
      background: url("../assets/images/openshop/btn@1x.png") no-repeat;
      border: none;
      /*margin: 620px auto 0 ;*/
      margin:0 auto;
      padding-left: 30px;
      box-sizing: border-box;
      font-size: 32px;
      color: #fff;
    }
    input::-webkit-input-placeholder {
      color: #fff;
    }
    input:-moz-placeholder {/* Firefox 18- */
      color: #fff;
    }
    input::-moz-placeholder{/* Firefox 19+ */
      color: #fff;
    }
    input:-ms-input-placeholder {
      color: #fff;
    }
    .openShop{
      width: 420px;
      height: 82px;
      background:url("../assets/images/openshop/btn_kaidian@1x.png") no-repeat;
      background-size: cover;
      vertical-align: middle;
      margin: 44px auto 0;
      box-sizing: border-box;
      padding-top: 10px;
      > a {
        color: #fff;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 28px;
        text-align: center;
        line-height: 74px;
      }
      > p{
        text-align: center;
        color: #fff;
        margin-top: 16px;
      }
    }
  }

</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }
  @media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){

    .fenlei {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      /*background-color: #f4f4f4;*/
      background: url("../assets/images/openshop/bg@1x.png") no-repeat;
      background-size: 100%;
      display: flex;
      box-sizing: border-box;
      /*padding-top:750px;*/
      flex-direction: column;
      position:relative;
      ::-webkit-scrollbar {
        display: none;
      }
      >input{
        position: absolute;
        width: 484px;
        height: 85px;
        background: url("../assets/images/openshop/btn@1x.png") no-repeat;
        border: none;
        margin:0 auto;
        top: 900px;
        left:24%;
        /*margin: 620px auto 0 ;*/
        margin:0 auto;
        padding-left: 30px;
        box-sizing: border-box;
        font-size: 32px;
        color: #fff;
      }
      input::-webkit-input-placeholder {
        color: #fff;
      }
      input:-moz-placeholder {/* Firefox 18- */
        color: #fff;
      }
      input::-moz-placeholder{/* Firefox 19+ */
        color: #fff;
      }
      input:-ms-input-placeholder {
        color: #fff;
      }
      .openShop{
        width: 420px;
        height: 82px;
        background:url("../assets/images/openshop/btn_kaidian@1x.png") no-repeat;
        background-size: cover;
        vertical-align: middle;
        position: absolute;
        top: 935px;
        left:28%;
        box-sizing: border-box;
        padding-top: 10px;
        > a {
          color: #fff;
          display: block;
          width: 100%;
          height: 100%;
          font-size: 28px;
          text-align: center;
          line-height: 74px;
        }
      }
    }
  }

</style>
